<script setup lang="ts">
import html2canvas from 'html2canvas'
import { downloadFile } from '~/utils/index'

export interface Props {
    authCertificate?: any;
}

const $props = defineProps<Props>()

const authorizationRef = shallowRef<any>()

function formatDate(dateString: string): string {
    const [year, month, day] = dateString.split('-');
    return `${year}年${month}月${day}日`;
}

async function handleDownload() {
    if (!authorizationRef.value) return
    const canvas = await html2canvas(authorizationRef.value);
    const imgUrl = canvas.toDataURL('image/png');
    downloadFile(imgUrl)
}

</script>

<template>

    <div class="authorization" ref="authorizationRef">
        <div class="head">
            <div class="head-avatar">
                <img src="./images/tubiao.png" alt="tubiao">
            </div>
            <div class="head-text">
                <div class="head-text-1">授权书证明</div>
                <div class="head-text-2">PROOF OF AUTHORIZATION</div>
                <div class="head-text-3">授权书编号：<span>{{ authCertificate?.order?.auth_code }}</span></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="content">
            <div class="content-title">【产品信息】</div>
            <div class="content-item">
                <div class="content-item-label">产品编号：</div>
                <div class="content-item-value">{{ authCertificate.order?.goods_code }}</div>
                <div class="clear"></div>
            </div>
            <div class="content-item">
                <div class="content-item-label">产品类型：</div>
                <div class="content-item-value">{{ authCertificate.type_name }}</div>
                <div class="clear"></div>
            </div>
            <div class="content-item">
                <div class="content-item-label">授权类型：</div>
                <div class="content-item-value">{{ authCertificate?.order?.auth_type }} | {{
                    authCertificate?.order?.auth_detail }} <span v-if="authCertificate?.order?.auth_scope">|</span> {{
                        authCertificate?.order?.auth_scope
                    }}</div>
                <div class="clear"></div>
            </div>
            <div class="content-item">
                <div class="content-item-label">授权时间：</div>
                <div class="content-item-value">{{ authCertificate?.auth_user?.authorize_time }}</div>
                <div class="clear"></div>
            </div>
            <div class="content-item" v-if="authCertificate?.order?.auth_duration">
                <div class="content-item-label">授权时长：</div>
                <div class="content-item-value">{{ authCertificate?.order?.auth_duration }}</div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="content">
            <div class="content-title">【卖方信息】</div>
            <div class="content-item">
                <div class="content-item-label">卖方ID：</div>
                <div class="content-item-value">{{ authCertificate?.order?.seller_code }}</div>
                <div class="clear"></div>
            </div>
            <div class="content-item">
                <div class="content-item-label">昵称：</div>
                <div class="content-item-value">{{ authCertificate?.seller?.auth_info?.real_name }}</div>
                <div class="clear"></div>
            </div>
            <div class="content-item">
                <div class="content-item-label">姓名：</div>
                <div class="content-item-value">{{ authCertificate?.seller?.auth_info?.real_name }}</div>
                <div class="clear"></div>
            </div>
            <div class="content-item">
                <div class="content-item-label">身份证：</div>
                <div class="content-item-value">{{ authCertificate?.seller?.auth_info?.id_card }}</div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="content">
            <div class="content-title">【买方信息】</div>
            <div class="content-item">
                <div class="content-item-label">买方ID：</div>
                <div class="content-item-value">{{ authCertificate?.order?.buyer_code }}</div>
                <div class="clear"></div>
            </div>
            <div class="content-item">
                <div class="content-item-label">姓名：</div>
                <div class="content-item-value">{{ authCertificate?.auth_user?.authorize_name_mi }}</div>
                <div class="clear"></div>
            </div>
            <div class="content-item">
                <div class="content-item-label">身份证：</div>
                <div class="content-item-value">{{ authCertificate?.auth_user?.authorize_code_mi }}</div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="message">
            <div class="message-item">
                <div class="message-item-label">
                    <img src="./images/icon.png" alt="icon">
                </div>
                <div class="message-item-value">此授权书证明，仅供参考，不具法律效力</div>
                <div class="clear"></div>
            </div>
            <div class="message-item">
                <div class="message-item-label">
                    <img src="./images/icon.png" alt="icon">
                </div>
                <div class="message-item-value">授权查询网址：https://www.xinanyuansu.com;</div>
                <div class="clear"></div>
            </div>
            <div class="message-item">
                <div class="message-item-label">
                    <img src="./images/icon.png" alt="icon">
                </div>
                <div class="message-item-value">受权方应严格按照授权类型，授权时长正确使用授权产品；因不正当使用授权产品造成的损失，授权方和技术支持公司有权追究其责任；</div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="corporation">
            <div class="corporation-item">【技术支持公司】</div>
            <div class="corporation-item">湖南心安元素数字科技有限公司</div>
            <div class="corporation-item">时间：{{ formatDate(authCertificate?.order?.order_time) }}</div>
            <div class="corporation-chapter">
                <img src="./images/zhang.png" alt="zhang">
            </div>
        </div>
    </div>
    <button class="download" @click="handleDownload">下载</button>
</template>

<style lang="less" scoped>
.download {
    width: 230px;
    height: 40px;
    border-radius: 5px;
    background-color: rgba(55, 133, 242, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    border: none;
    cursor: pointer;
}

.authorization {
    box-sizing: border-box;
    padding-top: 44px;
    width: 480px;
    margin: 0 auto;
    border: 1px solid #E7262E;
    margin-top: 50px;
    background-size: 400px;
    background-color: #f5eded;
    background-image: url('./images/shuishui.png');
}

.head {
    width: 75%;
    margin: 0 auto;
    margin-bottom: 34px;
}

.head-avatar {
    width: 90px;
    height: 90px;
    background-color: #eeeeee;
    border-radius: 50%;
    float: left;

    img {
        width: 100%;
        height: 100%;
        display: block;
    }
}

.head-text {
    float: left;
    margin-left: 30px;
}

.head-text-1 {
    font-size: 30px;
    font-weight: 700;
    color: #e62129;
}

.head-text-2 {
    font-size: 16px;
    font-weight: 700;
    color: #e62129;
}

.head-text-3 {
    font-size: 12px;
    color: #4e4847;
}

.head-text-3 span {
    color: #4f87fc;
}

.content {
    width: 75%;
    margin: 0 auto;
    font-size: 15px;
    margin-bottom: 20px;
}

.content-title {
    font-weight: 700;
}

.content-item {
    margin: 5px 0;
    display: flex;
}

.content-item-label {
    white-space: nowrap;
}

.content-item-value {
    color: #4f87fc;
}

.message {
    width: 75%;
    margin: 0 auto;
    font-size: 14px;
}

.message-item {
    margin: 10px 0;
    color: #7E7D7E;
}

.message-item-label {
    width: 10px;
    height: 10px;
    background-color: #070707;
    margin-top: 3px;
    margin-right: 10px;
    float: left;

    img {
        width: 100%;
        height: 100%;
        display: block;
    }
}

.message-item-value {
    width: 300px;
    float: left;
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
}

.corporation {
    font-size: 14px;
    width: 230px;
    margin-left: auto;
    margin-top: 50px;
    margin-bottom: 30px;
    position: relative;
}

.corporation-item {
    margin: 10px 0;
}

.corporation-chapter {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    right: 82px;
    bottom: -2px;

    img {
        width: 100%;
        height: 100%;
    }
}

.clear {
    clear: both;
}
</style>